 <% layout('sitelayout.html') -%>
<style>
    #div1 {
        margin: auto;
        position: relative;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .box {
        float: left;
        padding: 10px;
        border: 1px solid #ccc;
        background: #f7f7f7;
        box-shadow: 0 0 8px #ccc;
        cursor: pointer;
    }

        .box:hover {
            box-shadow: 0 0 10px #333;
        }

        .box img {
            width: 250px;
        }

            .box img:hover {
                -webkit-filter: blur(1px);
                filter: blur(1px);
            }

        .box div {
            width: 250px;
        }

            .box div h1 {
                font-size: 13px;
                font-weight: bold;
                border-bottom: 1px solid #ddd;
                padding-bottom: 8px;
                text-align: left;
            }

            .box div p {
                font-size: 12px;
                color: #888;
                line-height: 24px;
                text-align: left;
            }

    .is-loading {
        background-color: #fff;
        background-image: url('images/load.gif');
        background-repeat: no-repeat;
        background-position: center;
    }

    .badge {
        display: inline-block;
        min-width: 10px;
        padding: 5px;
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        color: #FDFCFC;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        background-color: #F70606;
        border-radius: 5px;
        position: inherit;
        bottom: 15px;
        right: 15px;
    }


    .popView {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 1);
        position: absolute;
        top: 0;
        display: none;
        z-index: 1000;
        color: #fff;
        padding: 10px;
        margin: 0px auto;
        text-align: center;
    }

    .closeBtn {
        color: #fff;
        font-size: 36px;
        cursor: pointer;
        position: absolute;
        top: 10px;
        right: 10px;
    }

        .closeBtn:hover {
            color: #eee;
        }

    .imgDiv {
        margin: 0px;
        overflow: hidden;
        text-align: center;
        border: 0px solid #fff;
        background-color: #fff;
        background-image: url('images/load.gif');
        background-repeat: no-repeat;
        background-position: center;
        padding: 3px;
        border-radius: 3px;
    }

        .imgDiv img {
            width: 100%;
            height: 100%;
        }


    .prevButton {
        position: absolute;
        left: 30px;
        top: 45%;
        font-size: 36px;
        cursor: pointer;
        color: #fff;
    }

    .nextButton {
        position: absolute;
        right: 30px;
        top: 45%;
        font-size: 36px;
        cursor: pointer;
        color: #fff;
    }

        .prewButton:hover, .nextButton:hover {
            color: #ccc;
        }
</style>
<div style="background-color: #fff;">
    <div class="container-fruit">
        <div id="div1" style="min-height: 1000px;">
            <div class="box"><img src="images/load.gif" alt="" style="width:20px;"></div>
        </div>
    </div>
    <div id="loadingMsg" class="alert alert-warning" role="alert" style="text-align: center;border-radius: 0px;margin-bottom: 3px;background-color: #F7F7F7;border-color: #E6E6E6;color:#888;">
        <img src="images/load.gif" alt="" style="width:20px;">  &nbsp;正在努力加载.......
    </div>
</div>



<div class="popView">
    <div class="pull-right">
        <span class="glyphicon glyphicon-remove closeBtn"></span>
    </div>
    <div class="imgDiv"></div>
    <div><span class="prevButton glyphicon glyphicon-chevron-left" onclick="showAssigeImg('prev')"></span></div>
    <div><span class="nextButton glyphicon glyphicon-chevron-right" onclick="showAssigeImg('next')"></span></div>
</div>



<script src="/js/lib/jquery.waterfall.min.js"></script>
<script type="text/javascript">
    var pageIndex = 1;
    var busy = 0;
    var dataList = [];
    function waterfall() {
        $("#div1").waterfall({
            itemClass: ".box",
            minColCount: 1,
            spacingHeight: 10,
            resizeable: true,
            isFadeIn: true,
            ajaxCallback: function (success, end) {
                success();
                end();
                var ScrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
                if (busy == 2 || busy == 1) { return; }
                if (pageIndex == 1 || ScrollBottom < 120) {
                    $("#loadingMsg").show();
                    busy = 1;
                    var Jsondata = {};
                    Jsondata.pageIndex = pageIndex;
                    Jsondata.pageSize = 10;
                    $.post("/admin/getproducts", JSON.stringify(Jsondata), function (response) {
                        $("#loadingMsg").hide();
                        if (response.length == 0) { busy = 2; success(); end(); return; }
                        var str = "";
                        var temp = '<div class="box" onclick="showImg(\'{{_id}}\')"><span class="badge">{{count}}张</span>';
                        temp += '    <div class="is-loading"><img  src="files/upload/small/{{filename}}" height="{{height}}" alt=""></div>'
                        temp += '           <div>'
                        temp += '      <h1>{{title}}</h1>'
                        temp += '      <p>{{description}}</p>'
                        temp += '    </div>'
                        temp += '</div>';
                        var temp2 = '<div class="box" onclick="showImg(\'{{_id}}\')"><span class="badge">{{count}}张</span>';
                        temp2 += '    <div class="is-loading" ><img src="files/upload/small/{{filename}}" height="{{height}}" alt=""></div>'
                        temp2 += '</div>';

                        for (var i = 0; i < response.length; i++) {
                            dataList.push(response[i]);
                            var height = 200;
                            height = (400.00 / response[i].width) * response[i].height * 25 / 40;

                            var resultTemp = temp;
                            if (response[i].title.toString() == "") resultTemp = temp2;
                            str += resultTemp.replace("{{filename}}", response[i].filename).replace("{{_id}}", response[i]._id).replace("{{title}}", response[i].title).replace("{{description}}", response[i].description).replace("{{height}}", height).replace("{{count}}", response[i].images.length);
                        }
                        if (pageIndex == 1) { $("#div1").html(str); $(document).scrollTop(0); $('.page-loading').delay(0).fadeOut(1000); }
                        else
                            $("#div1").append(str);
                        pageIndex++;
                        busy = 0;
                        success();
                        console.log(dataList);
                        end();
                    })

                }

            }
        })

    }

    function scrollToBottom() {
        var h = $(document).height() - $(window).height();
        $(document).scrollTop(h);
    }
    var currentObj = null;
    function showImg(id) {
        currentObj = null;
        for (i = 0; i < dataList.length; i++) {
            if (dataList[i]._id == id) currentObj = dataList[i];
        }
        showAssigeImg('init');
    }


    var index = 0;
    function showAssigeImg(type) {
        $(".prevButton,.nextButton").show();

        if (type == 'init') {
            index = 0;
        }
        else if (type == 'prev') {
            index--;
        }
        else if (type == 'next') {
            index++;
        }

        if (currentObj.images.length == 1) {
            $(".prevButton,.nextButton").hide();
        }
        else if (index == 0) {
            $(".prevButton").hide();
        }
        else if (index == currentObj.images.length - 1) {
            $(".nextButton").hide();
        }

        var o = currentObj.images[index];

        var scWt = $(window).width() - 20;
        var scHt = $(window).height() - 20;
        var height = o.height;
        var width = o.width;

        //console.log("scWt:" + scWt);
        //console.log("scHt:" + scHt);

        if (width > scWt) {
            height = height * (scWt / width);
            width = scWt;
        }
        if (height > scHt) {
            width = width * (scHt / height);
            height = scHt;
        }
        var margin_top = (scHt - height) / 2;
        var margin_left = (scWt - width) / 2;


        $(".imgDiv").html('<img id="tempImg"  src="files/upload/{{filename}}" style="display:none;" />'.replace("{{filename}}", o.filename));
        $(".imgDiv").css("margin-top", margin_top.toString() + "px")
                    .css("margin-left", margin_left.toString() + "px")
                    .css("height", height + "px").css("width", width + "px");

        $(".popView").css("height", (scHt + 100).toString() + "px")
                      .css("top", $(document).scrollTop().toString() + "px")
                      .fadeIn();
        $("body").css("overflow", "hidden");

        $('#tempImg').load(function () {
            $('#tempImg').fadeIn(1000);
        });

    }



    $(function () {
        waterfall();
        $("#footer").show();
        scrollToBottom();


        $(".closeBtn").click(function () {
            $(".popView").fadeOut(500);
            $("body").css("overflow", "scroll");
        });
    })


</script>
